<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:comps="http://java.sun.com/jsf/composite/comps" 
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./../resources/templates/newTemplate.xhtml">

            <ui:define name="logInfo">
                <h:link value="inicio" outcome="/vistas/inicio" />
            </ui:define>

            <ui:define name="left" >

            </ui:define>

            <ui:define name="principal">
                <div style="text-align: center; width: 100%" >
                    <p:panel style="width: 400px">
                        <h:outputText value="Ingresar" style="font-size: 18px; font-weight: bold;margin-top: 15px" />
                        <br/><br/>
                        <h:form>
                            <p:commandLink actionListener="#{login.fbLogin}" >
                                <h:graphicImage value="#{resource['images:conectarFb_grande.png']}" />
                            </p:commandLink>
                        </h:form>
                        <br/><br/>
                        <h:outputLabel value="Usar cuenta de AlquilaCosas:" />
                        <br/><br/>
                        <h:form>
                            <h:panelGrid columns="2" style="margin-left: auto;margin-right: auto;" >
                                <h:outputLabel  value="Usuario" for="username" />
                                <p:inputText id="username" value="#{login.username}" styleClass="passInput" required="true"
                                             requiredMessage="Ingrese nombre de usuario" />
                                <h:outputLabel value="Contraseña" for="password" />
                                <p:password id="password" value="#{login.password}" required="true" feedback="false"
                                            styleClass="passInput" requiredMessage="Ingrese contraseña" />
                                <f:facet name="footer" >
                                    <p:commandButton id="login" value="Entrar" actionListener="#{login.loguearse}" update="@form" />
                                </f:facet>
                            </h:panelGrid>
                            <p:messages id="msgs" />
                        </h:form>

                        <p:separator />

                        <h:outputText value="Registrarse" style="font-size: 18px; font-weight: bold;margin-top: 15px" />
                        <br/><br/>
                        <h:form>
                            <p:commandLink actionListener="#{login.fbLoginEnPagina}" >
                                <h:graphicImage value="#{resource['images:registrarFb_grande.png']}" />
                            </p:commandLink>
                        </h:form>
                        <br/><br/>
                        <h:link value="Crear una cuenta de AlquilaCosas" outcome="/vistas/registrarUsuario" />
                    </p:panel>
                </div>

            </ui:define>

        </ui:composition>

    </body>
</html>
